.creator-container{
    display: flex; height: 100vh;
    width: 100vw;
    .left-view{
        width: 200px; border-right: 1px solid red;
        .materical-show-view{
            width: 100%; height: 100px; overflow: hidden;
            margin-bottom: 10px; background: #f1f1f1;
            display: flex; align-items: center; position: relative;
            text-align: center; justify-content:center;
            .materical-name{
                position: absolute; left: 0; top: 0;
                font-size: 12px; padding: 2px 5px; background: rgb(243, 210, 64);
                border-radius: 0 0 8px 0;
            }
            .materical-add, .materical-drag{
                position: absolute; right: 0; top: 0; background:red; color: #fff;
                width: 20px; height: 20px; text-align: center; line-height: 20px;
                font-size: 12px; font-weight: bold; cursor: pointer;
            }
            .materical-drag{
                right: 21px; cursor: move;
            }
        }
    }
    .center-view{
        flex: 1; padding: 20px 0;
        .splice-pancel-container{
            width: 375px; height: 100%;
            margin: 0 auto 0; overflow: auto; position: relative;
            .view{
                width: 100%; height: 100%;
                background: #f1f1f1;
                .preview{
                    height: 20px; background: rgba(244, 197, 117, .5);
                    position: absolute;
                    &.hide{
                        display: none;
                    }
                }
            }
        }
    }
    .right-view{
        width: 200px;border-left: 1px solid red;
    }
}
